<template>
	<view class="carDetail">
		<b-swiper :swiper_list="carImg.imgs"></b-swiper>
		<view class="car">
			<view class="name">
				{{car.name}}
			</view>
			<view class="year">
				<view>年份：{{car.year}}</view>
				<view>变速箱：{{car.bianSuQi}}</view>
				<view>座位数：{{car.seats}}</view>
			</view>
			<view class="price">
				价格：{{carImg.price}}万
			</view>
			<view class="btn">
				<u-button class="buy" type="primary" text="购买" @click="buy"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import BSwiper from '@/components/b-swiper/b-swiper.vue'
	export default {
		components: {
			BSwiper
		},
		data() {
			return {
				carId: 0,
				car: {},
				carImg: {}
			}
		},
		methods: {
			async getCar(carId) {
				let ret = await uni.$get('getCarById', {
					carId
				})
				console.log(ret)
				this.car = ret
			},
			async getCarImg(carId) {
				let ret = await uni.$get('getCarImg', {
					carId
				})
				console.log(ret)
				this.carImg = ret
			},
			async buy() {
				let mine = uni.getStorageSync("mine")
				if (mine) {
					mine = JSON.parse(mine)
					let ret = uni.$post('addOrder', {
						user_id: mine.id,
						carId: this.carId
					})
					if (ret) {
						uni.showToast({
							title: '购买成功'
						})
					}
				} else {
					uni.showModal({
						content: '请登录后购买',
						success: ({
							confirm
						}) => {
							if (confirm) {
								uni.setStorageSync('navigateType', 'navigateTo')
								uni.setStorageSync('url', '/pages/car/car?carId=' + this.carId)
								uni.switchTab({
									url: '/pages/mine/mine'
								})
							}
						}
					})
				}
			}
		},
		onLoad({
			carId
		}) {
			this.carId = carId
			this.getCar(carId)
			this.getCarImg(carId)
		}
	}
</script>

<style scoped lang="scss">
	.carDetail {
		.car {
			border-bottom: 1px solid #eee;
			padding-left: 10px;
			padding-right: 10px;
			padding-bottom: 10px;

			.name {
				font-size: 16px;
				padding: 10px 0;
			}

			.year {
				display: flex;

				view {
					flex: 1;
				}
			}

			.price {
				color: tomato;
				margin-top: 10px;
			}

			.btn {
				margin-top: 10px;

				.buy {
					width: 200px;
				}
			}
		}
	}
</style>
